<template>
  <p>name: {{ data.name }}</p>
  <p>age: {{ data.age }}</p>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const data = reactive({
      name: 'ifer',
      age: 10,
      address: '河南',
      sex: '男',
    })
    // !问题 1：模板中多次用到了 data.，麻烦
    // !问题 2：明明模板中只用了 data 中的两个属性，你却把整个 data 都导出了，性能浪费
    return { data }
  }
}
</script>